<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/editor.css" rel="stylesheet" type="text/css">
<style>
.box{cursor:default;border:#9b95a6 1px solid;width:80px;background-color:white;}
</style>
<script>
  var sLangDir=parent.oUtil.langDir;
  document.write("<scr"+"ipt src='language/"+sLangDir+"/list.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>

function tabClick(n)
  {
  switch(n)
    {
    case 1:
      tab1.style.border="#e5e5e5 1px solid";
      tab1.style.borderBottom="none";
      tab1.style.background="#ffffff";
      tab1.style.cursor="";

      tab2.style.border="#e5e5e5 1px solid";
      tab2.style.borderLeft="none";
      tab2.style.background="#e5e5e5";
      tab2.style.cursor="pointer";

      divNumbered.style.visibility="visible";
      divBulleted.style.visibility="hidden";

      break;
    case 2:
      tab1.style.border="#e5e5e5 1px solid";
      tab1.style.borderRight="none";
      tab1.style.background="#e5e5e5";
      tab1.style.cursor="pointer";

      tab2.style.border="#e5e5e5 1px solid";
      tab2.style.borderBottom="none";
      tab2.style.background="#ffffff";
      tab2.style.cursor="";

      divNumbered.style.visibility="hidden";
      divBulleted.style.visibility="visible";

      break;
    }
  }

function GetElement(oElement,sMatchTag)
  {
  while (oElement!=null&&oElement.tagName!=sMatchTag)
    {
    if(oElement.tagName=="BODY")return null;
    oElement=oElement.parentElement;
    }
  return oElement;
  }

function doWindowFocus()
  {
  parent.oUtil.onSelectionChanged=new Function("realTime()");
  }
function bodyOnLoad()
  {
  loadTxt();

  tabClick(1);
  window.onfocus=doWindowFocus;
  parent.oUtil.onSelectionChanged=new Function("realTime()");

  if(parent.oUtil.obj.cmdAssetManager!="")btnAsset.style.display="block";

  realTime()
  }
function bodyOnUnload()
  {
  parent.oUtil.onSelectionChanged=null;
  }
function openAsset()
  {
  inpImgURL.value=eval(parent.oUtil.obj.cmdAssetManager);
  }
function setAssetValue(v)
    {
    document.getElementById("inpImgURL").value = v;
    }
function modalDialogShow(url,width,height)
  {
  parent.modalDialogShow(url,width,height, window);
  }
function realTime()
  {
  if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=parent.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  if(oSel.parentElement)
    {
    var oElement=oSel.parentElement()
    while (oElement!=null&&
      oElement.tagName!="OL"&&
      oElement.tagName!="UL")
      {
      if(oElement.tagName=="BODY")
        {
        //alert(getTxt("Please select a list."));
        return;
        }
      oElement=oElement.parentElement;
      }
    var oSelRange = oEditor.document.body.createControlRange()
    try
      {
      oSelRange.add(oElement);
      //oSelRange.select();
      }
    catch(e)
      {
      var oSelRange = oEditor.document.body.createTextRange();
      try{oSelRange.moveToElementText(oElement);
        //oSelRange.select()
        }catch(e){;}
      }

    if(oElement.tagName=="OL")
      {
      tabClick(1);
      if(oElement.type==""||oElement.type=="1")doClick1(box1);
      if(oElement.type=="A")doClick1(box2);
      if(oElement.type=="a")doClick1(box3);
      if(oElement.type=="I")doClick1(box4);
      if(oElement.type=="i")doClick1(box5);
      }
    if(oElement.tagName=="UL")
      {
      tabClick(2);
      if(oElement.type==""||oElement.type=="disc")doClick1(box6);
      if(oElement.type=="circle")doClick1(box7);
      if(oElement.type=="square")doClick1(box8);
      }
    if(oElement.start)
      inpStarting.value=oElement.start;
    else
      inpStarting.value="";

    if(oElement.style.marginLeft=="")
      {
      inpLeftMargin1.value="";
      inpLeftMargin2.value="";
      }
    else
      {
      inpLeftMargin1.value=oElement.style.marginLeft;
      inpLeftMargin2.value=oElement.style.marginLeft;
      }

    //list-style-image
    if(oElement.style.listStyleImage=="")
      {
      inpImgURL.value=""
      }
    else
      {
      s=oElement.style.listStyleImage;
      s=s.substring(4,s.length-1);
      inpImgURL.value=s;
      }
    }
  }
function setLeftMargin1(oEl)
  {
  if(inpLeftMargin1.value!="")
    oEl.style.marginLeft=inpLeftMargin1.value;
  else
    oEl.style.marginLeft="";
  }
function setLeftMargin2(oEl)
  {
  if(inpLeftMargin2.value!="")
    oEl.style.marginLeft=inpLeftMargin2.value;
  else
    oEl.style.marginLeft="";
  }
function doApply()
  {
  parent.oUtil.obj.setFocus();
  if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=parent.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();
  var obj=parent.oUtil.obj;
  obj.saveForUndo();

  var bBox1=false;var bBox2=false;var bBox3=false;var bBox4=false;
  var bBox5=false;var bBox6=false;var bBox7=false;var bBox8=false;
  if(box1.selThis=="selThis")bBox1=true;
  if(box2.selThis=="selThis")bBox2=true;
  if(box3.selThis=="selThis")bBox3=true;
  if(box4.selThis=="selThis")bBox4=true;
  if(box5.selThis=="selThis")bBox5=true;
  if(box6.selThis=="selThis")bBox6=true;
  if(box7.selThis=="selThis")bBox7=true;
  if(box8.selThis=="selThis")bBox8=true;

  if(oSel.parentElement)
    {
    var oElement=oSel.parentElement()
    while (oElement!=null&&oElement.tagName!="OL"&&oElement.tagName!="UL")
      {
      if(oElement.tagName=="BODY")obj.doCmd("InsertUnOrderedList");
      oElement=oElement.parentElement;
      }

    oSel=oEditor.document.selection.createRange();
    oElement=oSel.parentElement()
    while (oElement!=null&&oElement.tagName!="OL"&&oElement.tagName!="UL")
      {
      if(oElement.tagName=="BODY")return;
      oElement=oElement.parentElement;
      }

    oElement.removeAttribute("type",0);
    oElement.removeAttribute("start",0);

    //list-style-image
    if(inpImgURL.value!="")
      {
      oElement.style.listStyleImage="url('"+inpImgURL.value+"')";
      setLeftMargin2(oElement);

      if(bBox6)oElement.type="disc";
      if(bBox7)oElement.type="circle";
      if(bBox8)oElement.type="square";

      if(oElement.tagName=="OL")
        obj.doCmd("InsertUnOrderedList");

      //realTime();//tdk perlu krn otomatis onselectionchange
      return;
      }
    else
      {
      oElement.style.listStyleImage="";
      }

    if(inpStarting.value=="")
      nStart=1;
    else
      nStart=inpStarting.value;

    if(bBox1)
      {
      oElement.type="1";
      oElement.start=nStart;
      setLeftMargin1(oElement);
      if(oElement.tagName=="UL")
        obj.doCmd("InsertOrderedList");
      }
    if(bBox2)
      {
      oElement.type="A";
      oElement.start=nStart;
      setLeftMargin1(oElement);
      if(oElement.tagName=="UL")
        obj.doCmd("InsertOrderedList");
      }
    if(bBox3)
      {
      oElement.type="a";
      oElement.start=nStart;
      setLeftMargin1(oElement);
      if(oElement.tagName=="UL")
        obj.doCmd("InsertOrderedList");
      }
    if(bBox4)
      {
      oElement.type="I";
      oElement.start=nStart;
      setLeftMargin1(oElement);
      if(oElement.tagName=="UL")
        obj.doCmd("InsertOrderedList");
      }
    if(bBox5)
      {
      oElement.type="i";
      oElement.start=nStart;
      setLeftMargin1(oElement);
      if(oElement.tagName=="UL")
        obj.doCmd("InsertOrderedList");
      }

    if(bBox6)
      {
      oElement.type="disc";
      setLeftMargin2(oElement);
      if(oElement.tagName=="OL")
        obj.doCmd("InsertUnOrderedList");
      }
    if(bBox7)
      {
      oElement.type="circle";
      setLeftMargin2(oElement);
      if(oElement.tagName=="OL")
        obj.doCmd("InsertUnOrderedList");
      }
    if(bBox8)
      {
      oElement.type="square";
      setLeftMargin2(oElement);
      if(oElement.tagName=="OL")
        obj.doCmd("InsertUnOrderedList");
      }
    //realTime();
    }
    parent.oUtil.obj.bookmarkSelection();
  }
function doClick1(oEl)
  {
  box1.style.border='white 2px solid';
  box1.selThis="";
  box2.style.border='white 2px solid';
  box2.selThis="";
  box3.style.border='white 2px solid';
  box3.selThis="";
  box4.style.border='white 2px solid';
  box4.selThis="";
  box5.style.border='white 2px solid';
  box5.selThis="";
  box6.style.border='white 2px solid';
  box6.selThis="";
  box7.style.border='white 2px solid';
  box7.selThis="";
  box8.style.border='white 2px solid';
  box8.selThis="";

  oEl.style.border='#708090 2px solid';
  oEl.selThis="selThis";

  inpImgURL.value="";
  }
function doMouseOut(oEl)
  {
  if(oEl.selThis=="selThis")
    {
    oEl.style.border='#708090 2px solid';
    }
  else
    {
    oEl.style.border='white 2px solid';
    }
  }
function doMouseOver(oEl)
  {
  if(oEl.style.border!='#708090 2px solid')
  oEl.style.border='#e0e0e0 2px solid';
  }
</script>
</head>
<body style="overflow:hidden;">

<table width="100%" height="250px" align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding-top:12px;padding-left:10px;padding-right:10px;padding-bottom:0px;">

  <table cellpadding=0 cellspacing=0 style="border-collapse:collapse;width:100%;">
  <tr>
  <td nowrap id=tab1 style="cursor:pointer;padding:8px;" onclick="tabClick(1)"><b><span id=txtLang name=txtLang>Numbered</span></b></td>
  <td nowrap id=tab2 style="cursor:pointer;padding:8px;" onclick="tabClick(2)"><b><span id=txtLang name=txtLang>Bulleted</span></b></td>
  <td style="border-bottom:#e5e5e5 1px solid;" width="100%"></td>
  </tr>
  </table>


  <table cellpadding=0 cellspacing=0 style="border:#e5e5e5 1px solid;border-top:none;border-collapse:collapse;width:100%;height:195px;background:#ffffff;">
  <tr>
  <td style="padding:7px;" valign="top" height="100%" style="position:relative;">

  <!-- NUMBERED -->
  <div id=divNumbered style="visibility:visible;position:absolute;">

  <table style="border-collapse:separate">
  <tr>
  <td class="box" style="padding:1px">
    <table cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td id="box1" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ol style="margin-top:2px;margin-bottom:2px" type="1">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ol>
    </td>
    </tr>
    </table>
  </td>
  <td>&nbsp;</td>
  <td class="box">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td id="box2" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ol style="margin-top:2px;margin-bottom:2px" type="A">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ol>
    </td>
    </tr>
    </table>
  </td>
  <td>&nbsp;</td>
  <td class="box">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td id="box3" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ol style="margin-left:6px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="a">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ol>
    </td>
    </tr>
    </table>
  </td>
  </tr>
  <tr>
  <td class="box">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td id="box4" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ol style="margin-left:6px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="I">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ol>
    </td>
    </tr>
    </table>
  </td>
  <td>&nbsp;</td>
  <td class="box">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td id="box5" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ol style="margin-left:6px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="i">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ol>
    </td>
    </tr>
    </table>
  </td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  </tr>
  <tr>
  <td nowrap colspan="5" style="padding-top:5px">
    <span id="txtLang" name="txtLang" style="width:90px">Starting Number</span>: <input class="inpTxt" type="text" name="inpStarting" value="1" size="3">
  </td>
  </tr>
  <tr>
  <td nowrap colspan="5" style="padding-top:5px">
    <span id="txtLang" name="txtLang" style="width:90px">Left Margin</span>:
    <select name="inpLeftMargin1" class="inpSel">
      <option value=""></option>
      <option value="1em" selected>1em</option>
      <option value="2em">2em</option>
      <option value="3em">3em</option>
      <option value="4em">4em</option>
      <option value="5em">5em</option>
      <option value="6em">6em</option>
      <option value="7em">7em</option>
    </select>
  </td>
  </tr>
  </table>

  </div>

  <!-- BULLETED -->
  <div id="divBulleted" style="visibility:hidden;position:absolute;">

  <table>
  <tr>
  <td class="box" style="padding:1px">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td id="box6" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ul style="margin-left:6px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="disc">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ul>
    </td>
    </tr>
    </table>
  </td>
  <td>&nbsp;</td>
  <td class="box">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td id="box7" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ul style="margin-left:6px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="circle">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ul>
    </td>
    </tr>
    </table>
  </td>
  <td>&nbsp;</td>
  <td class="box">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td id="box8" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
      onclick="doClick1(this)"
      onmouseover="doMouseOver(this)"
      onmouseout="doMouseOut(this)">
    <ul style="margin-left:6px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="square">
    <li>-----</li>
    <li>-----</li>
    <li>-----</li>
    </ul>
    </td>
    </tr>
    </table>
  </td>
  </tr>
  <!--
  <tr>
  <td colspan="5" style="padding-top:5;height:86">&nbsp;
  </td>
  </tr>
  -->
  <tr>
  <td colspan="5" style="padding-top:5px;height:57px">&nbsp;
  </td>
  </tr>
  <tr>
  <td colspan="5" style="padding-top:5px">
    <table cellpadding="0" cellspacing="0" style="width:100%" id="Table1">
    <tr>
    <td nowrap><span id="txtLang" name="txtLang" style="width:90px">Using Image - url</span>:</td>
    <td style="width:100%;padding-left:3px"><input type="text" id="inpImgURL" name=inpImgURL style="width:150px" class="inpTxt"></td>
    <td><input type="button" value="" onclick="openAsset()" id="btnAsset" name="btnAsset" style="display:none;background:url('openAsset.gif') no-repeat center center;width:23px;height:18px;border:#a5acb2 1px solid;margin-left:1px;"></td>
    </tr>
    </table>
  </td>
  </tr>

  <tr>
  <td nowrap colspan="5" style="padding-top:5px">
    <span id="txtLang" name="txtLang" style="width:90px">Left Margin</span>:
    <select name="inpLeftMargin2" class="inpSel">
      <option value=""></option>
      <option value="1em" selected>1em</option>
      <option value="2em">2em</option>
      <option value="3em">3em</option>
      <option value="4em">4em</option>
      <option value="5em">5em</option>
      <option value="6em">6em</option>
      <option value="7em">7em</option>
    </select>
  </td>
  </tr>
  </table>

  </div>

  </td>
  </tr>
  </table>

</td>
</tr>
<tr>
<td class="dialogFooter" align="right" style="padding-top:10px;">
  <table cellpadding=0 cellspacing=0>
  <tr>
  <td>
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name=btnApply id=btnApply value="apply" onclick="doApply()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  </tr>
  </table>
</td>
</tr>
</table>

</body>
</html>